<template>
    <view class="header">
        <!-- 为返回图标添加点击事件 -->
        <uni-icons type="left" size="25" @click="goBack"></uni-icons>
        <view class="title">修改我的昵称</view>
        <!-- 为保存按钮添加点击事件 -->
        <view class="save-btn" @click="saveNickname">保存</view>
    </view>
    <view class="updatenickname-page">
        <view>
            <!-- 绑定输入框的值到 username 变量 -->
            <uni-easyinput :inputBorder="false" type="text" placeholder="请输入昵称" clearable="true" primaryColor="#c0c4cc" v-model="username"></uni-easyinput>
        </view>
        <view class="remark">英文字母或汉字，限 4 - 16 个字符，一个汉字为 2 个字符</view>
    </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 定义昵称变量
const username = ref('');

// 获取用户昵称的函数
const fetchNickname = async () => {
    try {
        const res = await uni.request({
            method: 'GET',
            url: 'http://localhost:9100/api/user/selectById', // 替换为实际的 API 地址
            header: {
                'bece_token': uni.getStorageSync('bece_token') // 假设使用 bece_token 进行身份验证
            }
        });
        if (res.data.code === 200) {
            username.value = res.data.data.username;
        } else {
            uni.showToast({
                title: res.data.msg || '获取昵称失败',
                duration: 2000
            });
        }
    } catch (error) {
        uni.showToast({
            title: '网络请求失败',
            duration: 2000
        });
        console.error('请求出错:', error);
    }
};

// 点击返回时跳转到指定页面
const goBack = () => {
    uni.switchTab({
        url: '/pages/user/my/my' 
    });
};

// 点击保存时调用保存 API
const saveNickname = async () => {
    try {
        const res = await uni.request({
            method: 'POST',
            url: 'http://localhost:9100/api/user/updateUsername', 
            header: {
                'bece_token': uni.getStorageSync('bece_token'),
            },
            data: {
                username: username.value
            }
        });
        if (res.data.code === 200) {
            uni.showToast({
                title: '保存成功',
                icon: 'success',
                duration: 2000
            });
            
            uni.switchTab({
                url: '/pages/user/my/my' 
            });
        } else {
            uni.showToast({
                title: res.data.msg || '保存失败',
                icon: 'none',
                duration: 2000
            });
        }
    } catch (error) {
        uni.showToast({
            title: '网络请求失败',
            icon: 'none',
            duration: 2000
        });
        console.error('请求出错:', error);
    }
};

// 页面加载时获取用户昵称
onMounted(() => {
    fetchNickname();
});
</script>

<style scoped>
.uni-nav-bar-right-text {
    font-size: 60rpx;
}

.updatenickname-page {
    padding: 0 45rpx;
}

.uni-easyinput {
    font-size: 28rpx;
    border-bottom: 1rpx solid #666ee8;
}

.uni-input-placeholder {
    font-size: 30rpx !important;
}

.uni-easyinput__content-input {
    margin: 0rpx;
    padding: 0rpx !important;
}

.remark {
    margin-top: 20rpx;
    font-size: 24rpx;
    color: #c0c4cc;
}

.header {
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 14rpx;
    position: relative;
    border-bottom: 2rpx solid #F5F5F5;
}

.title {
    font-size: 32rpx;
    font-weight: bold;
    position: absolute;
    left: 280rpx;
}

.save-btn {
    font-size: 30rpx;
    color: blue;
    position: absolute;
    right: 38rpx
}
</style>